<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../../charts/style.css" type="text/css"/>
    <script type="text/javascript" src="../../js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="../../charts/amcharts.js"></script>
<script type="text/javascript" src="../../charts/pie.js"></script>
<script type="text/javascript" src="../../charts/serial.js"></script>
</head>
<script>

    $.ajaxSetup({
        async:false
    });
    var chart;

    var chartData ;


    AmCharts.ready(function () {
        $.getJSON("../../room/getRoomNum",null,function(data){
            console.log(data.data);
            //chartData=data.data;
            chart = new AmCharts.AmSerialChart();   //条形图
            chart.dataProvider =data.data; //获取数据
            chart.categoryField = "roomtypestr"; //横坐标
            chart.fontSize = 12;  //标题大小
            chart.startDuration = 1;//动画
            chart.plotAreaBorderColor = "#DADADA";
            chart.plotAreaBorderAlpha = 1;
            // this single line makes the chart a bar chart
            chart.rotate = true;
            // AXES
            // Category
            var categoryAxis = chart.categoryAxis;
            categoryAxis.gridPosition = "start";
            categoryAxis.gridColor = "#000000"; //网格线颜色
            categoryAxis.axisColor = "#000000";  //横坐标轴颜色
            categoryAxis.gridAlpha = 0.1;//网格线透明度
            categoryAxis.axisAlpha = 0; //坐标轴透明度

            // Value
            var valueAxis = new AmCharts.ValueAxis();//纵坐标轴
            valueAxis.axisAlpha = 0;//坐标轴透明度
            valueAxis.gridAlpha = 0.1;//网格线透明度
            valueAxis.position = "top";
            chart.addValueAxis(valueAxis);

            // GRAPHS
            // first graph
            var graph1 = new AmCharts.AmGraph();
            graph1.type = "column";
            graph1.title = "房间数量";
            graph1.valueField = "roomNum"; //数据源
            graph1.balloonText = "roomNum:[[value]]";
            graph1.lineAlpha = 0;
            graph1.fillColors = "#ADD981";
            graph1.fillAlphas = 1; //透明度
            chart.addGraph(graph1);

            // second graph
            var graph2 = new AmCharts.AmGraph();
            graph2.type = "column";
            graph2.title = "可入住房间数量";
            graph2.valueField = "inRoomNum";
            graph2.balloonText = "inRoomNum:[[value]]";
            graph2.lineAlpha = 0;
            graph2.fillColors = "#81acd9";
            graph2.fillAlphas = 1;
            chart.addGraph(graph2);

            // LEGEND
            var legend = new AmCharts.AmLegend();
            chart.addLegend(legend);

            chart.creditsPosition = "top-right";

            // WRITE
            chart.write("chartdiv");
        });
    });
    var chart1;

    var chartData1;

    AmCharts.ready(function () {
        $.getJSON("../../bill/getBillNumByRoomType",null,function(data){
            console.log(data.data);

        // PIE CHART
        chart1 = new AmCharts.AmPieChart();

        // title of the chart
        chart1.addTitle("房间类型订单数量图", 16);
        chart1.dataProvider = data.data;
        chart1.titleField = "roomtype";
        chart1.valueField = "billnumber";
        chart1.sequencedAnimation = true;
        chart1.startEffect = "elastic";
        chart1.innerRadius = "30%";
        chart1.startDuration = 2;
        chart1.labelRadius = 15;
        chart1.balloonText = "[[title]]<br><span style='font-size:14px'><b>[[value]]</b> ([[percents]]%)</span>";
        // the following two lines makes the chart 3D
        chart1.depth3D = 10;
        chart1.angle = 15;
        // WRITE
        chart1.write("chartdiv1");
    });  });
</script>



<body>
<div id="chartdiv"  style="height:600px;width:900px;float: left;"></div>
<div id="chartdiv1" style="width:900px; height:600px;float: left;"></div>
</body>
</html>
